@import './common.scss';
@mixin title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
    .left {
        i {
            font-size: 7.2vw;
            color: #ff9344;
        }
        span {
            display: inline-block;
            font-size: 4vw;
            height: 6.07vw;
            line-height: 6.07vw;
            vertical-align: text-bottom;
            color: #000000;
        }
    }
    .right {
        i {
            font-size: 3.37vw;
            color: #ff9344;
        }
        span {
            font-size: 4vw;
            line-height: 6.07vw;
            color: #000000;
        }
    }
}

.banner {
    width: 100vw;
    height: 38.27vw;
    overflow: hidden;
    img {
        width: 100%;
    }
}

.tuan {
    margin: 4.4vw auto;
    width: 94.4vw;
    .title {
        @include title;
    }
    .box {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .imgBox {
            width: 32.13vw;
            height: 12.93vw;
            overflow: hidden;
            margin-bottom: 3vw;
            img {
                width: 100%;
            }
        }
    }
}

.love {
    width: 94.4vw;
    margin: 0 auto;
    .title {
        @include title;
    }
    .list {
        margin-top: 4vw;
        .item {
            margin-bottom: 4vw;
            display: flex;
            justify-content: space-between;
            .imgBox {
                width: 28.13vw;
                overflow: hidden;
                height: 21.87vw;
                img {
                    width: 100%;
                }
            }
            .text {
                display: flex;
                color: black;
                flex-direction: column;
                justify-content: space-between;
                width: 64.13vw;
                .shop {
                    font-size: 4vw;
                    span {
                        float: right;
                        font-size: 2.93vw;
                        vertical-align: bottom;
                    }
                }
                .youhui {
                    font-size: 2.93vw;
                    margin: 2.4vw 0 2.93vw 0;
                }
                .money {
                    font-size: 4.27vw;
                    color: #ff9344;
                    span {
                        float: right;
                        font-size: 2.93vw;
                        color: black;
                        vertical-align: bottom;
                    }
                }
            }
        }
    }
}

@media screen and (min-width:769px) and(max-width:1025px) {
    .tuan {
        .box {
            .imgBox {
                width: 23vw;
                height: auto;
            }
        }
    }
    .love {
        .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            .item {
                margin: 3vw 1vw;
                display: inline-block;
                .text {
                    width: 28.13vw;
                    .shop {
                        font-size: 3vw;
                        position: relative;
                        span {
                            font-size: 2vw;
                            position: absolute;
                            top: 9.5vw;
                            right: 1vw;
                        }
                    }
                    .youhui {
                        font-size: 2vw;
                    }
                    .money {
                        font-size: 3vw;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        span {
                            font-size: 1.9vw;
                        }
                    }
                }
            }
        }
    }
}